<template>
	<view>
		<view class="navbar">
			<view class="navbar-fixed">
				<!-- 状态栏小程序撑起高度 -->
				<view :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="navbar-content" :style="{ height: navBarHeight + 'px', width: windowWidth + 'px' }">
					<!-- <image src="../../static/image/back.png" @click="back()"></image> -->
					<view class="navbar-search" v-if="showTitle">我的</view>
				</view>
			</view>
			<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）indexOf-->
			<view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
			<!-- 我的信息 -->
			<view class="info">
				<view class="left" @click="tologin()">
					<image class="headImg" :src="myinfo.wxPhotoURL ? myinfo.wxPhotoURL : '../../static/default-avatar.png'"> </image>
					<view class="item">
						<view class="title"
							><text>{{ myinfo.name }}</text>
							<!-- identity 1普通用户2志愿者3老师 is_dy  是否党员1是0否  is_doctor  是否医生1是0否 老师 is_teacher 1是0否-->
							<image v-if="myinfo.identity == 2 && myinfo.is_doctor == 1" class="title_img" src="@/static/sex2.png"></image>
							<image v-if="myinfo.identity == 2 && myinfo.is_dy == 1" class="title_img" src="@/static/dy.png"> </image>
						</view>
						<view class="phone" @click.stop="toMyDetail">{{ myinfo.phoneNumber ? myinfo.phoneNumber : "绑定手机号" }}</view>
					</view>
				</view>
				<image class="right" src="@/static/right@.png" @click.stop="toMyDetail"></image>
			</view>
			<!-- 定位背景图 -->
			<div class="info_bj"></div>
		</view>
		<!-- 	 my data -->
		<!-- <view class="my_data">
			<view class="item" v-for="(item, index) in myDataList" :key="item.id" @click="mavTo(item.url)">
				<image :src="item.image"></image>
				<text class="text">{{ item.name }}</text>
			</view>
		</view> -->

		<!-- 学习服务 -->
		<view class="learn">
			<view class="title">其他功能</view>
			<view class="navList">
				<view class="item" v-for="item in learnList" :key="item.id" @click="topage(item, index)" :style="{ display: item.display == false ? 'none' : '' }">
					<image :src="item.image"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 其他功能 -->
		<!-- <view class="learn">
			<view class="title">其他功能</view>
			<view class="navList">
				<view class="item" v-for="item in restsList" :key="item.id" @click="topage(item, index)" :style="{ display: item.display == false ? 'none' : '' }">
					<image :src="item.image"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view> -->
		<!-- 获取手机号 -->
		<view class="loginbox" v-if="mobileShow">
			<view class="logininfo">
				<view class="lohintitle">请先绑定手机号</view>
				<view class="loginbut">
					<view class="butone" @click="mobileShow = false">取消</view>
					<view class="buttwo">
						获取手机号
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
					</view>
				</view>
			</view>
		</view>
		<image @click="towebview()" style="width: 100%; bottom: 10rpx" mode="widthFix" :src="baseUrl+'/uploads/images/copyright.png'"></image>
		<tarbar :actbar="1"></tarbar>
		<uni-popup ref="qrcode" type="center">
			<view style="padding: 20rpx; background-color: white; border-radius: 20rpx">
				<image @click="preview(baseUrl + myinfo.wxcode_url)" :src="baseUrl + myinfo.wxcode_url" mode="widthFix" style="width: 500rpx"></image>
				<view style="text-align: center; margin-top: 20rpx">
					<uni-icons type="close" size="40" @click="closeDialog"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import tarbar from "../../components/tabbar.vue"
import { baseUrl } from "../../setting"
export default {
	components: {
		tarbar,
	},
	data() {
		return {
			baseUrl:uni.baseUrl,
			statusBarHeight: 20,
			/* 状态栏高度 */
			navBarHeight: 45,
			/* 导航栏高度 */
			windowWidth: 375,
			/* 窗口宽度 */
			/* 设定状态栏默认高度 */
			showTitle: true,
			myinfo: {},
			myDataList: [
				{
					image: "../../static/myData@1.png",
					name: "我的订单",
					id: 1,
					url: "/pageshop/orderlist/orderlist?type=" + "" + "&currindex=" + 1,
				},
				// {
				// 	image: "../../static/myData@2.png",
				// 	name: "购物车",
				// 	id: 2,
				// 	url: "/pageshop/shoppingCart/shoppingCart",
				// },
				// {
				// 	image: "../../static/myData@3.png",
				// 	name: "我的课程",
				// 	id: 3,
				// 	url: "/pages/myCourse/myCourse",
				// },
				// {
				// 	image: "../../static/myData@4.png",
				// 	name: "我的评价",
				// 	id: 4,
				// 	url: "/pagemy/mycomment/mycomment",
				// },
			],
			learnList: [
				// {
				// 	image: "../../static/learn@1.png",
				// 	name: "我的收藏",
				// 	id: 1,
				// 	path: "/pageshop/collect/collect",
				// 	toast: true,
				// },
				// {
				// 	image: "../../static/learn@2.png",
				// 	name: "积分任务",
				// 	id: 2,
				// 	path: "/pagemy/integralTask/integralTask",
				// },
				// {
				// 	image: "../../static/learn@3.png",
				// 	name: "志愿者",
				// 	id: 3,
				// 	path: "/pages/authoration/authoration",
				// },
				// {
				// 	image: "../../static/learn@4.png",
				// 	name: "家庭信息",
				// 	id: 4,
				// 	path: "/pagemy/familylist/familylist",
				// },
				{
					image: "../../static/learn@5.png",
					name: "我的活动",
					id: 5,
					path: "/pagemy/actorderlist/actorderlist",
				},
				{
					image: "../../static/learn@6.png",
					name: "管理活动",
					id: 6,
					path: "/pagemy/actlistadmin/actlistadmin",
					display: false,
				},
				// {
				// 	image: "../../static/shequ.jpg",
				// 	name: "社区介绍",
				// 	id: 7,
				// 	path: "/pagemy/shequ/shequ",
				// 	display: true,
				// },
				// {
				// 	image: '../../static/learn@2.png',
				// 	name: "积分任务",
				// 	id: 7,
				// 	path:'/pagemy/integralTask/integralTask'
				// }
			],
			restsList: [
				{
					image: "../../static/rests@1.png",
					name: "教师课程",
					id: 1,
					path: "/pagemy/teacherclasslist/teacherclasslist",
					display: false,
				},
				// {
				// 	image: '../../static/rests@2.png',
				// 	name: "教师课时",
				// 	id: 2
				// },
				{
					image: "../../static/rests@3.png",
					name: "消息通知",
					id: 3,
					path: "/pagemy/message/message",
				},
				{
					image: "../../static/hx.png",
					name: "商品核销",
					id: 4,
					dispaly: false,
				},
				// {
				// 	image: '../../static/rests@4.png',
				// 	name: "我的客服",
				// 	id: 4
				// },
				// {
				// 	image: '../../static/rests@5.png',
				// 	name: "意见建议",
				// 	id: 5
				// },
				{
					image: "../../static/rest@7.jpg",
					name: "推广码",
					id: 98,
				},
				{
					image: "../../static/learn@5.png",
					name: "我的下级",
					id: 99,
				},
			],
			token: uni.getStorageSync("token"),
			mobileShow: false,
		}
	},
	// computed: {
	// 	baseUrl() {
	// 		return uni.baseUrl
	// 	},
	// },
	onShow() {
		this.getnav()
		this.token = uni.getStorageSync("token") || ""
		if (this.token) {
			this.getmyinfo()
		}
	},
	// 滚动隐藏,暂时用不上
	// onPageScroll(e) {
	// 	console.log(e.scrollTop);
	// 	if (e.scrollTop > this.statusBarHeight + this.navBarHeight) {
	// 		this.showTitle = false
	// 	} else {
	// 		this.showTitle = true
	// 	}
	// },
	methods: {
		preview(url) {
			uni.previewImage({
				urls: [url],
				current: url,
			})
		},
		closeDialog() {
			this.$refs.qrcode.close()
		},
		mavTo(url) {
			// if(not){
			// 	uni.showToast({
			// 		icon:'none',
			// 		title:'【敬请期待】'
			// 	})
			// 	return
			// }
			if (url) {
				uni.navigateTo({
					url,
				})
			} else {
				uni.showToast({
					title: "正在快马加鞭开发中",
					icon: "none",
				})
			}
		},
		getnav() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo)
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		},
		// 跳转我的资料
		toMyDetail() {
			uni.navigateTo({
				url: "/pages/myDetail/myDetail",
			})
		},
		topage(item, index) {
			if (!this.myinfo.wxPhotoURL) {
				this.tologin()
				return
			}
			if (item.id == 99) {
				uni.navigateTo({
					url: "/pagemy/invite/invite",
				})
				return
			}
			if (item.id == 98) {
				this.$refs.qrcode.open()
				return
			}
			if (item.toast) {
				uni.showToast({
					icon: "none",
					title: "【敬请期待】",
				})
				return
			}
			if (item.path) {
				//is_verifier 1是0否
				if (this.myinfo.is_verifier == 0 && item.name == "管理活动") {
					uni.showToast({
						title: "您并不是活动管理员",
						icon: "none",
					})
					return
				}
				if (item.name == "志愿者" && this.myinfo.is_post_volun == 1) {
					//is_post_volun 0未提交 1已提交
					if (this.myinfo.identity == 2) {
						uni.showToast({
							title: "您已是志愿者",
							icon: "none",
						})
						return
					} else {
						uni.showToast({
							title: "后台审核中，请耐心等待",
							icon: "none",
						})
						return
					}
				}
				//identity 1普通用户2志愿者3老师 is_teacher 1是0否
				if (this.myinfo.is_teacher !== 1 && item.name == "教师课程") {
					uni.showToast({
						title: "您并不是教师",
						icon: "none",
					})
					return
				}
				// if(this.myinfo.is_teacher==1&&item.name=='志愿者'){
				// 	uni.showToast({
				// 		title:'您已是教师',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				uni.navigateTo({
					url: item.path,
				})
			} else {
				// this.toscan()
				if (this.myinfo.is_goods_hx == 1) {
					//is_goods_hx  是否为商品核销员0否1是
					this.toscan()
				} else {
					uni.showToast({
						title: "您并不是商城核销员",
						icon: "none",
					})
				}
			}
		},
		// 扫码核销
		toscan() {
			// 只允许通过相机扫码
			let that = this
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					console.log("条码类型：" + res.scanType)
					console.log("条码内容：" + res.result)
					that.$http({
						url: "/api/Wechat/goods_hx",
						data: {
							order_id: res.result,
						},
					}).then((res) => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000,
						})
						this.getinfo()
					})
				},
			})
		},
		getmyinfo() {
			this.$http({
				url: "/api/Course/user_info",
			}).then((res) => {
				this.myinfo = res.data
				//identity 1普通用户2志愿者3老师
				//is_verifier 1是0否
				if (this.myinfo.is_verifier == 1) {
					this.learnList.forEach((item) => {
						if (item.name == "管理活动") {
							item.display = true
						}
					})
				}
				//is_teacher 1是0否
				if (this.myinfo.is_teacher == 1) {
					this.restsList.forEach((item) => {
						if (item.name == "教师课程") {
							item.display = true
						}
					})
				}
				//is_goods_hx  是否为商品核销员0否1是
				if (this.myinfo.is_goods_hx == 1) {
					this.restsList.forEach((item) => {
						if (item.name == "商品核销") {
							item.display = true
						}
					})
				}
			})
		},
		//去登录
		tologin() {
			if (!this.myinfo.wxPhotoURL) {
				uni.navigateTo({
					url: "/pages/newlogin/newlogin",
				})
			}
		},
		bindphone() {
			if (!this.myinfo.phoneNumber) {
				console.log(123)
				this.mobileShow = true
			}
		},
		//绑定手机号
		getPhoneNumber(e) {
			// return
			this.$http({
				url: "/api/Wechat/bind_mobile",
				data: {
					code: e.detail.code,
				},
			}).then((res) => {
				this.myinfo.phoneNumber = res.data
				uni.showToast({
					title: res.msg,
					icon: "none",
				})
				this.mobileShow = false
				this.getinfo()
				// setTimeout(()=> that.onNavigateBack(),1000)
				// uni.switchTab({
				// 	url:'/pages/index/index'
				// })
			})
		},
		towebview() {
			uni.navigateTo({
				url: "/pagemy/webview/webview",
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.navbar {
	width: 750rpx;
	height: 360rpx;
	background: #fee2e7;
	position: relative;

	.navbar-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 399;
		width: 100%;
		background: transparent;

		.navbar-content {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0rpx 30rpx;
			box-sizing: border-box;

			image {
				width: 19rpx;
				height: 35rpx;
				margin-right: 20rpx;
			}

			.navbar-search {
				display: flex;
				align-items: center;
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}

	// 我的信息
	.info {
		margin: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 99;

		.left {
			display: flex;
			align-items: center;
			gap: 0 26rpx;

			.headImg {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
				border: 2rpx solid #f3f2f2;
			}

			.item {
				display: flex;
				flex-direction: column;
				font-size: 36rpx;
				font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
				font-weight: bold;
				color: #222222;
				line-height: 1em;
				gap: 22rpx 0;

				.title {
					gap: 0 30rpx;
					display: flex;
					align-items: center;

					.title_img {
						width: 32rpx;
						height: 34rpx;
					}
				}
			}

			.phone {
				// width: 162rpx;
				// height: 44rpx;
				width: fit-content;
				padding: 10rpx 16rpx;
				background: rgba(0, 0, 0, 0.5);
				line-height: 1em;
				border-radius: 42rpx;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #ffffff;
			}
		}

		.right {
			width: 28rpx;
			height: 28rpx;
		}
	}

	// 定位背景图
	.info_bj {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 158rpx;
		background-image: url($uni-url + "/images/info@bj.png");
		background-size: 100% 100%;
	}
}

// my data
.my_data {
	width: 690rpx;
	height: 202rpx;
	background: #ffffff;
	position: relative;
	top: -10rpx;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 15rpx;
	padding: 28rpx 28rpx 40rpx 28rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;

	.item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		image {
			width: 90rpx;
			height: 90rpx;
		}

		.text {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			line-height: 1em;
		}
	}
}

// 学习服务
.learn {
	width: 690rpx;
	background: #ffffff;
	border-radius: 15rpx;
	margin: 24rpx 30rpx;
	padding: 34rpx 28rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	.title {
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: bold;
		color: #222222;
		line-height: 1em;
		margin-bottom: 30rpx;
	}

	.navList {
		width: 100%;
		height: 100%;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		// gap: 50rpx 0;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: calc(100% / 4);
			margin-top: 40rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 20rpx;
			}

			text {
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				line-height: 1em;
			}
		}
	}
}

.loginbox {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	z-index: 99;
	top: 0;

	// left: 0rpx;
	.logininfo {
		// position: fixed;
		width: 560rpx;
		margin: auto;
		height: 250rpx;
		background-color: #ffffff;
		padding: 60rpx 50rpx 10rpx 50rpx;
		margin-top: 552rpx;
		border-radius: 20rpx;

		.lohintitle {
			width: 360rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			margin: auto;
			margin-bottom: 60rpx;
			text-align: center;
		}

		.loginbut {
			display: flex;
			justify-content: space-around;

			.butone {
				width: 190rpx;
				padding: 0 30rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				border: 2rpx solid #ff8a9b;
				border-radius: 43rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ff8a9b;
			}

			.buttwo {
				position: relative;
				padding: 0 30rpx;
				width: 190rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				background: linear-gradient(180deg, #ff8a9b 0%, #ff8a9b 100%);
				border-radius: 43rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #fff;

				> button {
					position: absolute;
					opacity: 0;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
